<template>
	<view class="register">
		<view class="languageUpdate">
			<languageUpdate color="#ED762F" />
		</view>
		<div class="register-title">
			<view class="text">
				{{ $t('page.register.title') }}
			</view>
		</div>
		<view class="register-content">
			<div class="register-username">
				<image src='../../static/register/userNameLogin@3x.png'></image>
				<u--input :placeholder="$t('page.register.userNamePlaceholder')" border="surround"
					v-model="registerForm.account"></u--input>
			</div>

			<div class="register-password">
				<u--input :placeholder="$t('page.register.userPasswordPlaceholder')" type="password" border="surround"
					v-model="registerForm.pass"></u--input>
			</div>
			<view class="info" v-if="registerForm.pass">
				{{ $t('page.register.Reconfirm-password') }}
			</view>
			<div class="register-password Reconfirm" v-if="registerForm.pass">
				<u--input :placeholder="$t('page.register.retransmissionCode')" border="surround" type="password"
					v-model="registerForm.repass"></u--input>
			</div>

			<div class="register-password">
				<u--input :placeholder="$t('page.register.paymentPassword')" border="surround" type="password"
					v-model="registerForm.pay_pass"></u--input>
			</div>
			<view class="info" v-if="registerForm.pay_pass">
				{{ $t('page.register.Reconfirm-the-payment-password') }}
			</view>
			<div class="register-password Reconfirm" v-if="registerForm.pay_pass">
				<u--input :placeholder="$t('page.register.reinputPaymentpassword')" border="surround" type="password"
					v-model="registerForm.re_pay_pass"></u--input>
			</div>
			<div class="register-password">
				<u--input :placeholder="$t('page.register.invitation-code')" border="surround" type="password"
					v-model="registerForm.invitation_code"></u--input>
			</div>

			<view class="agreement">
				<u-checkbox-group v-model="checkboxValue" placement="column">
					<u-checkbox name="1"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement_info">
					{{ $t('page.register.agree')}}<text
						class="u">{{ $t('page.register.privacy-policy' )}}</text>{{ $t('page.register.and') }}<text
						class="u">{{ $t('page.register.service-agreement') }}</text>
				</view>
			</view>

			<u-button type="primary" @click="Register()" :text="$t('page.register.registerNow')"
				style="border-radius: 10px;" color="#ED762F" size="large"></u-button>
			<view class="register-bottom">
				<text @click="toLogin()">{{ $t('page.register.toLogin') }}</text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import languageUpdate from '@/components/base/languageUpdate.vue'
	export default {
		components: {
			languageUpdate
		},
		data() {
			return {
				registerForm: {
					account: '',
					pass: '',
					repass: '',
					pay_pass: '',
					re_pay_pass: '',
					invitation_code: '' //邀请码
				},
				checkboxValue: []
			}
		},
		created() {

		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			Register() {
				if (this.registerForm.account.trim() === '') return uni.$u.toast(this.$t('page.register.account-message'))
				else if (this.registerForm.pass.trim() === '') return uni.$u.toast(this.$t('page.register.pass-message'))
				else if (this.registerForm.repass.trim() === '') return uni.$u.toast(this.$t(
					'page.register.re-account-message'))
				else if (this.registerForm.repass.trim() !== this.registerForm.pass.trim()) return uni.$u.toast(this.$t(
					'page.register.message-inconformity'))
				else if (this.registerForm.pay_pass.trim() === '') return uni.$u.toast(this.$t(
					'page.register.pay-pass-message'))
				else if (this.registerForm.re_pay_pass.trim() === '') return uni.$u.toast(this.$t(
					'page.register.re-pay-pass-message'))
				else if (this.registerForm.re_pay_pass.trim() !== this.registerForm.pay_pass.trim()) return uni.$u.toast(
					this.$t('page.register.re-pay-pass-inconformity'))
				else if (this.registerForm.invitation_code.trim() === '') return uni.$u.toast(
					this.$t('page.register.invitation-code'))
				else if (this.checkboxValue.length == 0) return uni.$u.toast(this.$t(
					'page.register.xy'))
				this.request('register', {}, {
					account: this.registerForm.account,
					password: this.registerForm.pass,
					okPassword: this.registerForm.repass,
					okPayPass: this.registerForm.pay_pass,
					payPass: this.registerForm.re_pay_pass,
					invitationCode : this.registerForm.invitation_code
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						setTimeout(() => uni.$u.toast(this.$t('page.register.register-success')), 300)
					}
					
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		height: 100vh;
		background: white;

		.languageUpdate {
			display: flex;
			width: 80%;
			margin: 0px auto;
			box-sizing: border-box;
			padding: 25px 0px;
			justify-content: flex-start;
		}

		.register-pic {
			margin-top: 30px;
			height: 250px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 120px;
				height: 120px;
			}
		}

		.register-title {
			margin: 0px auto;
			width: 80%;
			white-space: nowrap;

			.text {
				padding-bottom: 6px;
				width: 35px;
				border-bottom: 4px solid #ED762F;
			}
		}

		.register-content {
			width: 80%;
			margin: 0px auto;
			margin-top: 30px;

			.info {
				font-size: 12px;
				padding-bottom: 10px;
				display: flex;
			}

			.info::before {
				content: '';
				background: url(/static/register/20240427203606.png);
				width: 10px;
				height: 10px;
				display: block;
				background-size: 100% 100%;
			}

			.Reconfirm {
				background-color: rgb(250, 237, 230);
			}

			.register-username,
			.register-password {
				display: flex;
				border: 1px solid #ED762F;
				height: 35px;
				align-items: center;
				margin-bottom: 20px;
				padding: 0 10px;
				border-radius: 5px;
				box-sizing: border-box;

				image {
					width: 20px;
					height: 20px;
				}
			}

			.agreement {
				font-size: 25rpx;
				padding: 20px 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.u {
					color: #ED762F;
				}

				.agreement_info {
					width: calc(100% - 50px);
				}
			}

			.register-bottom {
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				padding: 0px 10px;
				margin-top: 15px;
				color: #555;
				font-size: 14px;
			}
		}
	}
</style>